/**
 * Created by yoyoyk on 2017/3/8.
 */
import React , {Component}from 'react';


import {Button,Modal} from 'fly';

import InputBox from '../../common/InputBox.js'
import Confirm from '../../common/Confirm'
import Select from '../../common/Select'

/*业务平台>人员管理>编辑部门*/

export default class Editpart extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            visible: false,
            depName:'',
            description:''
        }
        this.Style={};
    }

    componentWillMount() {
        this.setState({
            setdefault:this.props.setdefault
        });
        this.setState({
            partid:this.props.partid
        })
        this.Style.addpersonview={
            textAlign:"center",
            display:"block",
            border:"3px solid green"
        }
        this.Style.addpersonview.width = 400;
        this.Style.addpersonview.height = 200;
        this.Style.addpersonview.fontSize = 30;

        this.Style.addpersonview={
            width:"634px",
            height:"44px",
            paddingLeft:"18px",
            lineHeight:"44px",
            display:"block",
            background:"#f2f2f2",
            marginBottom:49
        }
    }

    componentDidMount(){
    }

    state = { visible: false }
    showModal = () => {
        this.setState({
            visible: true,
        });

    }
    handleOk = (e) => {
        this.setState({
            visible: false,
        });
    }
    handleCancel = (e) => {
        this.setState({
            visible: false,
        });
    }

    createuser(){
        if(!this.validate('depName')){
            this.setState({
                visible: true,
            });
            return;
        }
        this.props.fixpartment(this.refs.partname.state.text,this.refs.partdescription.state.text);
    }
    handleclick (){
        this.props.functest();
        
    }
    
    setname(name,description){
        this.refs.partname.setState({
            text: name
        });
        this.refs.partdescription.setState({
           text: description ||''
        });
    }

    bluron(type) {
        this.validate(type);
    }

    validate(type){
        let rs=false;
        switch (type) {
            case 'depName':
                let name = this.refs.partname.state.text;
                let rule = /^([A-Za-z0-9\u4e00-\u9fa5]){1,20}$/;
                if (name == "") {
                    this.setState({
                        depName: "部门名称不能为空"
                    });
                }else if(!rule.test(name)){
                    this.setState({
                        depName: "部门名称长度为12以内中英字符"
                    });
                } else {
                    this.setState({
                        depName: ""
                    });
                    rs=true;
                }
                return rs;
            case 'departmentdescription':
                let description = this.refs.partdescription.state.text.trim();
                var rule =/^.{0,500}$/;
                if(!rule.test(description)){
                    this.setState({
                        description:'部门描述长度不可大于200字符'
                    });
                }else {
                    this.setState({
                        description:''
                    });
                    rs=true;
                }
                return rs;
        }
    }
    render(){
        return (
            <div>
                <Modal maskClosable={false} className="people_editpart---modal close_style_modal" visible={this.state.visible}
                       onOk={this.createuser.bind(this)} onCancel={this.handleCancel} style={{width:"654px",height:"240px",display:"block"}} title={"编辑部门"}>
                  <div className="people_crePart--editPart">
                      <i className="star1"></i>
                      <span className="title_option"> 部门名称 </span>
                      <InputBox defaultvalute={''}  className="_input__re_margin" maxlength={12} isloginintext={true} space="12px" style={{width:317,height:30,borderColor:"#d7d7d7",color:"#999",paddingRight:64}} ref={'partname'} bluron={this.bluron.bind(this,'depName')} />
                      <span style={{color:"#ff6f64",position:"absolute",left:"310px",top:"7px"}}>{this.state.depName}</span>
                  </div>
                    <div>
                        <span className="title_option" style={{position:"absolute",left:42,top:123}}>部门描述</span>
                        <InputBox multiline className="_input__re_margin" defaultvalute="内容最多不得超过200个字。" maxlength={200} titletext="" space="12px" style={{width:380,height:115,borderColor:"#d7d7d7",color:"#999",marginLeft:87,paddingRight:25,paddingLeft:100}} ref={'partdescription'} bluron={this.bluron.bind(this,'departmentdescription')}/>
                    </div>

                    <span style={{color:"#ff6f64",position:"absolute",left:"116px",top:"270px"}}>{this.state.description}</span>

                    <div className="people_Editpart--foot__delete" onClick={this.handleclick.bind(this)}>
                        <img src="./img/delete.png" />
                        <span style={{color:"#999",cursor:"pointer",marginLeft:10}} >删除部门</span>
                    </div>

                </Modal>
            </div>
        )
    }
}




